<template>
	<view class="detail" :style="{'paddingBottom':'150rpx'}">
		<image :src="info.image" class="top-image"></image>

		<view class="top">
			<view class="title">{{ info.name }}</view>
			<view class="steps" v-if="info.is_user&&info.user_status !=2">
				<view class="s1">
					<text>申请中</text>
					<text>已报名</text>
				</view>
				<view class="s2">
					<view class="back"></view>
					<view class="c1" v-if="info.user_status == 0"></view>
					<view class="c1 c2" v-if="info.user_status == 1"></view>
					<view class="c1" v-if="info.user_status == 1"></view>
				</view>
			</view>
			<view class="no" v-if="info.is_user&&info.user_status ==2">
				<view class="t1">
					<image src="@/static/no.png"></image>
					<text>未通过</text>
				</view>
				<view class="p">{{ info.user_refuse }}</view>
			</view>

			<view class="tt">
				<view class="t1">
					<text>任务时间：</text>
					<text>{{ info.start_end }}</text>
				</view>
				<view class="t1">
					<text>报名截止：</text>
					<text>{{ info.sign_end_time_text }}</text>
				</view>
				<view class="t1">
					<text>报名名额：</text>
					<text>{{ info.num > 0 ? info.num + '人' : '不限制' }}</text>
				</view>
				<view class="t1">
					<text>工资待遇：</text>
					<text>{{ info.in_money }}</text>
				</view>
				<view class="t1">
					<text>招聘要求：</text>
					<text>{{ info.ask }}</text>
				</view>
			</view>
		</view>

		<view class="h2">任务详情</view>

		<view class="cont">
			<u-parse v-if="content" :content="content"></u-parse>
			<u-empty v-else text="无任务详情" mode="data" width="100" height="100"></u-empty>
		</view>
        
        
        <view v-if='vuex_token'>
            <view v-if="vuex_user.group_id != 2">
                <view class="but-1" @click="setApply" v-if="info.is_user == 0">我要报名</view>
                <view class="but-1 but-2" @click="setNoApply" v-if="info.is_user == 1 && info.user_status == 0">取消报名</view>
            </view>
        </view>
        
        <view v-else>
            <view class="but-1" @click="setApply">我要报名</view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				content: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getInfo();
			uni.showLoading({
				title: '详情加载中...'
			});
		},
		methods: {
			getInfo() {
				let that = this
				that.$API.getTaskInfo({
					id: that.id
				}).then(res => {
					// 调试代码,完成后删除
					// 1.申请中
					// res.data.is_user=1
					// res.data.user_status = 0
					// 2.报名成功
					// res.data.is_user=1
					// res.data.user_status = 1
					// 3.未通过
					// res.data.is_user=1
					// res.data.user_status = 2

					// 正常逻辑代码
					that.info = res.data
					that.content = res.data.content
					uni.hideLoading();
				}).catch(err => {
					console.log('err', err)
				})
			},
			// 报名
			setApply() {
				if (!this.vuex_has_login) {
					uni.showModal({
						title: '提示',
						content: '你还没有登录，请登录后报名',
						confirmText: '去登录',
						success(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/my/index'
								})
							} 
						}
					})
				} else {
					let that = this
					that.$API.postApply({
						id: this.info.id
					}).then(res => {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: () => {
								that.getInfo();
							}

						})
					})
				}
			},
			setNoApply() {
				let that = this
				that.$API.postNoApply({
					id: this.info.id
				}).then(res => {
					uni.showModal({
						title: '提示',
						content: res.msg,
						showCancel: false,
						success: () => {
							that.getInfo();
						}

					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-image {
		width: 750rpx;
		height: 400rpx;
	}

	.top {
		position: relative;
		width: 654rpx;
		padding: 12rpx 24rpx 24rpx 24rpx;
		top: -82rpx;
		background: #fff;
		margin: 0 auto;
		border-radius: 16rpx;

		.title {
			height: 82rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			border-bottom: 2rpx solid #ECECEC;
			color: #000;
			font-weight: 550;
			font-family: fantasy;
		}

		.tt {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;

			.t1 {
				display: flex;
				flex-direction: row;
				align-items: top;
				margin: 8rpx 0;

				text {
					line-height: 48rpx;
					font-size: 28rpx;
					color: #606266;
					font-weight: 400;

					&:nth-child(1) {
						width: 140rpx;
						color: #606266;
						font-weight: 400;
					}

					&:nth-child(2) {
						width: 510rpx;
						font-weight: 500;
					}
				}
			}
		}

		.steps {
			display: flex;
			flex-direction: column;
			padding-bottom: 36rpx;
			padding-top: 20rpx;

			.s1 {
				display: flex;
				flex-direction: row;

				text {
					flex: 1;
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
				}
			}

			.s2 {
				position: relative;
				display: flex;
				flex-direction: row;
				height: 36rpx;

				.back {
					width: 100%;
					height: 12rpx;
					background-color: #CFF7F2;
					position: absolute;
					left: 0;
					top: 12rpx;
				}

				.c1 {
					position: relative;
					width: 50%;
					height: 12rpx;
					top: 12rpx;
					left: 0;
					background-color: #30D6C2;

					&::after {
						content: "";
						position: absolute;
						width: 36rpx;
						height: 36rpx;
						border-radius: 36rpx;
						background-color: #30D6C2;
						left: 151rpx;
						top: -12rpx;
					}
				}
                .c2 {
                    &::after {
                        display: none;
                    }
                }
			}
		}

		.no {
			min-height: 98rpx;
			background: #F3F4F6;
			border-radius: 8rpx;
			padding: 24rpx;
			margin-top: 24rpx;
			margin-bottom: 28rpx;

			.t1 {
				display: flex;
				flex-direction: row;

				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 28rpx;
					color: #FF4D3C;
				}
			}

			.p {
				padding-top: 24rpx;
				font-size: 28rpx;
				color: #909399;
			}
		}
	}

	.h2 {
		position: relative;
		width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #606266;
		font-size: 28rpx;
		text-align: center;
		margin: 15rpx auto;
		margin-top: -72rpx;
		padding: 44rpx 0 34rpx 0;

		&::after {
			content: "";
			position: absolute;
			width: 32rpx;
			height: 2rpx;
			background-color: #606266;
			left: 0;
			top: 55%;
		}

		&::before {
			content: "";
			position: absolute;
			width: 32rpx;
			height: 2rpx;
			background-color: #606266;
			right: 0;
			top: 55%;
		}
	}

	.cont {
		width: 654rpx;
		padding: 24rpx;
		background: #fff;
		margin: 0 auto;
		border-radius: 16rpx;
		color: #606266;
		font-size: 28rpx;
		line-height: 2;
	}

	.but-1 {
		width: 750rpx;
		height: 122rpx;
		background: #30D6C2;
		border-radius: 16rpx 16rpx 0 0;
		opacity: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		line-height: 122rpx;
		text-align: center;
		color: #ffffff;
		font-size: 36rpx;
	}

	.but-2 {
		background-color: #228377;
	}
</style>